<!--
 * @Date: 2022-03-26 14:53:56
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-29 10:23:06
 * @FilePath: \vue3Components\src\views\progresstest.vue
 * @Description: something
-->
<template>
  <Progress :percentage="100" isAnimation></Progress>
  <br />
  <br />
  <br />
  <Progress :percentage="100" isAnimation :text-inside="true" :stroke-width="20" status="exception"></Progress>
  <br />
  <br />
  <br />
  <Progress type="dashboard" :percentage="80" isAnimation>
    <span class="percentage-value">{{ 80 }}%</span>
    <span class="percentage-label">Progressing</span>
  </Progress>
  <br />
  <br />
  <br />
  <Progress type="circle" :percentage="100" status="success" isAnimation>
    <el-button type="success" :icon="Check" circle />
  </Progress>
</template>
 <script lang='ts' setup>
import Progress from '@/components/progress/Progress.vue'
import { Check } from '@element-plus/icons-vue'
</script>
<style lang='less' scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>